<template>
    <div>
        <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="(item, index) in data" :key="index">
                <div class="data-show">
                    <el-container>
                        <el-aside class="data-img" :width="imgWidth[index] + 'px'"
                            ><img
                                :src="item.img"
                                ref="imgWidth"
                                @load="imgLoad(index)"
                        /></el-aside>
                        <el-main class="data-info">{{ item.info }}</el-main>
                    </el-container>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: [
                { img: require("../../assets/test.jpg"), info: "测试" },
                { img: require("../../assets/test2.jpg"), info: "测试2" },
            ],
            imgWidth: [],
        };
    },
    methods: {
        // 动态获取图片宽度，用于渲染 el-aside 宽度
        imgLoad(index) {
            this.$nextTick(() => {
                this.imgWidth[index] = this.$refs.imgWidth[index].width;
            });
        },
    },
};
</script>

<style scoped>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
.data-show img {
    max-height: 200px;
}
.data-img {
    text-align: left;
}
.data-info {
    text-align: left;
}
</style>